<?php include 'common/head.php' ?>

<body id="page1">
<div class="body1">
    <div class="body2">
        <div class="body3">
            <div class="main">
                <!-- HEADER -->
                <?php include 'common/header.php' ?>
                <!-- /HEADER -->
               
                <!-- CONTENT -->
                         <div id="searcherBox" class="">
                             <div id="searcher" class="button">Wyszukiwanie</div>
                             <div id="searcherContent" style="display:block;">
                                <form id="searchForm">
                                  	<table style="padding: 10px;">
										<tr>
                                            <td class="searcherTableCol1"><span>Data:</span></td>
                                            <td class="searcherTableCol2">
                                                 <span style="display: inline-block"><input type="text" id="dateFrom" name="dateFrom" class="short-input"/></span>
                                                 <span style="display: inline-block">-</span> 
                                                 <span style="display: inline-block"><input type="text" id="dateTo" name="dateTo" class="short-input"/></span>
                                            </td>
                                        </tr>

										<tr>
											<td class="searcherTableCol1"><span>Cel:</span></td>
											<td class="searcherTableCol2">
											    <div class="styled-select">
												    <select id="placeTo" name="placeTo">
												       <option value="">Wszystkie</option>
													   <option value="bieszczady">Bieszczady</option>
													   <option value="mazury">Mazury</option>
													   <option value="morze">Morze</option>
													   <option value="tatry">Tatry</option>
												    </select>
											     </div>
											</td>
										</tr>
										
										<tr>
											<td class="searcherTableCol1"><span>Liczba osób:</span></td>
											<td class="searcherTableCol2">
											     <input type="text" id="people" name="people" class="input"/>
											</td>
										</tr>
										
										<tr>
                                            <td class="searcherTableCol1"><span>Cena:</span></td>
                                            <td class="searcherTableCol2">
                                                 <span style="display: inline-block"><input type="text" id="priceFrom" name="priceFrom" class="short-input"/></span>
                                                 <span style="display: inline-block">-</span> 
                                                 <span style="display: inline-block"><input style="display: inline-block" type="text" id="priceTo" name="priceTo" class="short-input"/></span>
                                            </td>
                                        </tr>
                                        
                                        <tr>
                                            <td class="searcherTableCol1"><span>Ocena:</span></td>
                                            <td class="searcherTableCol2" style="padding-bottom: 20px;">
                                                <!-- INITALIZATION IS DOWN IN JAVASCRIPT -->
                                                <div id="rates" style="font-size: 20px;"></div>
                                                <div id="rateSlider" style="margin-left: 10px;"></div>
                                            </td>
                                        </tr>
                                        
                                        <tr>
                                            <td class="searcherTableCol1"><span>Wyżywienie:</span></td>
                                            <td class="searcherTableCol2">
                                                <div class="styled-select">
                                                    <select id="promo" name="promo">
                                                       <option value="">Wszystkie</option>
                                                       <option value="allIn">All inclusive</option>
                                                       <option value="posilek1">1 posiłek</option>
                                                       <option value="posilki2">2 posiłki</option>
                                                       <option value="posilki3">3 posiłki</option>
                                                    </select>
                                                 </div>
                                            </td>
                                        </tr>
                                        
                                        <tr>
                                            <td class="searcherTableCol1"><span>Promocja:</span></td>
                                            <td class="searcherTableCol2">
                                                <div class="styled-select">
                                                    <select id="promo" name="promo">
                                                       <option value="">Wszystkie</option>
                                                       <option value="promo1">Last Minute</option>
                                                       <option value="promo2">Karta stałego klienta</option>
                                                    </select>
                                                 </div>
                                            </td>
                                        </tr>
		
		                                <tr>
                                            <td class="searcherTableCol1"><span>Sortuj:</span></td>
                                            <td class="searcherTableCol2">
                                                <div class="styled-select">
                                                    <select id="sort" name="sort">
                                                       <option value="priceAsc">Cena rosnąco</option>
                                                       <option value="priceDesc">Cena malejąco</option>
                                                       <option value="ratingASC">Ocena rosnąco</option>
                                                       <option value="ratingDSC">Ocena malejąco</option>
                                                       <option value="ratingNumDSC">Liczba ocen rosnąco</option>
                                                       <option value="ratingNumDSC">Liczba ocen malejąco</option>
                                                    </select>
                                                 </div>
                                            </td>
                                        </tr>
		                                  
										<tr>
											<td colspan="2">
											     <br/>
												 <span id="searchBtn" class="button" style="margin-left: 35px; width: 100%;text-align: center;cursor: pointer"> Szukaj</span>
											</td>
										</tr>
									</table>
                                </form>    
                             </div>
                         </div>
                                
                  <table id="offertSearchResults" style="display: none;">
						<!-- Table header -->
						   <thead>
							<tr class="header">
								<th>Oferta</th>
								<th>Ocena</th>
								<th>Liczba osób</th>
								<th>Opis</th>
                                <th>Cena</th>
   							</tr>
						 </thead>

						<!-- Table body -->
						  <tbody class="body">
							    <tr class="odd" onclick="showDetails('offert1');">
								    <td class="ofert">
								        <figure class="offert-image">
								             <img src="images/ofert/zakopane.jpg" alt="">
								        </figure>
								        <span class="place">Hotel Fian, Zakopane</span>
								    </td>
								    <td> 
								        <p class="rating" style="padding: 0px;">
                                            <span class="full">&#9734; &#9734; &#9734;</span>
                                            <span>&#9734; &#9734;</span>
                                        </p>
                                    </td>
								    <td class="people">1,2,3,4</td>
								    <td class="desc">
								        Ośrodek Fian Zakopane jest nowoczesnym, komfortowym obiektem położonym
w uroczym zakątku Zakopanego, w bezpośrednim sąsiedztwie koleji linowej na Kasprowy Wierch,
kompleksu narciarskiego Nosal oraz Wielkiej Krokwi. 
								    </td>
								    <td class="price">1200 zł</td>
							    </tr>
							    
							    <tr class="even" onclick="showDetails('offert1');">
                                    <td class="ofert">
                                        <figure class="offert-image">
                                             <img src="images/ofert/szczyrk.jpg" alt="">
                                        </figure>
                                        <span class="place"> Hotel Skrzyczne, Szczyrk</span>
                                    </td>
                                    <td> 
                                        <p class="rating" style="padding: 0px;">
                                            <span class="full">&#9734; &#9734; &#9734; &#9734;</span>
                                            <span>&#9734;</span>
                                        </p>
                                    </td>
                                    <td class="people">1,2,3</td>
                                    <td class="desc">
                                        Idealny na wakacje w bardzo korzystnej cenie dla całej rodziny.
                                    </td>
                                    <td class="price">1700 zł</td>
                                </tr>
                                
                                <tr class="odd" onclick="showDetails('offert1');">
                                    <td class="ofert">
                                        <figure class="offert-image">
                                             <img src="images/ofert/male_ciche.jpg" alt="">
                                        </figure>
                                        <span class="place">Schronisko Puchatek, Małe Ciche</span>
                                    </td>
                                    <td> 
                                        <p class="rating" style="padding: 0px;">
                                            <span class="full">&#9734;</span>
                                            <span>&#9734; &#9734; &#9734; &#9734;</span>
                                        </p>
                                    </td>
                                    <td class="people">4,5,6</td>
                                    <td class="desc">
                                        Miła atmosfera, dobry serwis i obsługa.
                                    </td>
                                    <td class="price">1650 zł</td>
                                </tr>
                                
                                <tr class="even" onclick="showDetails('offert1');">
                                    <td class="ofert">
                                        <figure class="offert-image">
                                             <img src="images/ofert/sanok.jpg" alt="">
                                        </figure>
                                        <span class="place">Pensjonat pod Rózą, Sanok</span>
                                    </td>
                                    <td> 
                                        <p class="rating" style="padding: 0px;">
                                            <span class="full">&#9734; &#9734; &#9734; &#9734; &#9734;</span>
                                            <span></span>
                                        </p>
                                    </td>
                                    <td class="people">1,2</td>
                                    <td class="desc">
                                        Bardzo kameralny hotel z dobrą jakością i serwisem a jednoczenie dobrą ceną na wakacje w spokojnej miejscowości.
                                    </td>
                                    <td class="price">1300 zł</td>
                                </tr>
                                
                                <tr class="odd" onclick="showDetails('offert1');">
                                    <td class="ofert">
                                        <figure class="offert-image">
                                             <img src="images/ofert/stary_smokovec.jpg" alt="">
                                        </figure>
                                        <span class="place">Hotel Skalny, Stary Smokowiec</span>
                                    </td>
                                    <td> 
                                        <p class="rating" style="padding: 0px;">
                                            <span class="full">&#9734; &#9734; &#9734;</span>
                                            <span>&#9734; &#9734;</span>
                                        </p>
                                    </td>
                                    <td class="people">1,2,5,6</td>
                                    <td class="desc">
                                        Obecnie jest popularnym ośrodkiem turystycznym, głównie dla narciarzy oraz amatorów pieszych wycieczek. Jest również ważnym węzłem zelektryfikowanej linii kolei wąskotorowej, łączącej Poprad, Tatrzańską Łomnicę oraz Szczyrbskie Jezioro. W Starym Smokowcu znajduje się także dolna stacja kolejki na Smokowieckie Siodełko.
                                    </td>
                                    <td class="price">2250 zł</td>
                                </tr>
                                
                                <tr class="even" onclick="showDetails('offert1');">
                                    <td class="ofert">
                                        <figure class="offert-image">
                                             <img src="images/ofert/muszyna_zlocka.jpg" alt="">
                                        </figure>
                                        <span class="place">Hotel Star, Muszyna Złocka</span>
                                    </td>
                                    <td> 
                                        <p class="rating" style="padding: 0px;">
                                            <span class="full">&#9734; &#9734; &#9734;</span>
                                            <span>&#9734; &#9734;</span>
                                        </p>
                                    </td>
                                    <td class="people">1,2,3,4,5,6</td>
                                    <td class="desc">
                                        Obiekt położony na terenie płaskim, otoczony łagodnymi zalesionymi wzniesieniami. Teren przyjazny do spacerów i turystyki górskiej.
                                    </td>
                                    <td class="price">650 zł</td>
                                </tr>
                                
                                <tr class="odd" onclick="showDetails('offert1');">
                                    <td class="ofert">
                                        <figure class="offert-image">
                                             <img src="images/ofert/gdynia.jpg" alt="">
                                        </figure>
                                        <span class="place">Hotel Muszelka, Gdynia</span>
                                    </td>
                                    <td> 
                                        <p class="rating" style="padding: 0px;">
                                            <span class="full">&#9734; &#9734; &#9734; &#9734;</span>
                                            <span>&#9734;</span>
                                        </p>
                                    </td>
                                    <td class="people">4,5,6</td>
                                    <td class="desc">
                                        Najbardziej popularna plaża w Gdyni. Na szerokości 200 m zorganizowano kąpielisko. Plaża jest doskonale skomunikowana, można do niej dojechać autobusem, trolejbusem, a z przystanku SKM idzie się 10-15 minut.
                                    </td>
                                    <td class="price">1150 zł</td>
                                </tr>
                                
                                <tr class="even" onclick="showDetails('offert1');">
                                    <td class="ofert">
                                        <figure class="offert-image">
                                             <img src="images/ofert/zakopane.jpg" alt="">
                                        </figure>
                                        <span class="place">Schronisko Miś, Zakopane</span>
                                    </td>
                                    <td> 
                                        <p class="rating" style="padding: 0px;">
                                            <span class="full">&#9734;</span>
                                            <span>&#9734; &#9734; &#9734; &#9734;</span>
                                        </p>
                                    </td>
                                    <td class="people">6</td>
                                    <td class="desc">
                                        Zakopane po raz drugi zaprasza dużą grupę osób na wspaniałą przygodę z górami i nocnymi misiami.
                                    </td>
                                    <td class="price">300 zł</td>
                                </tr>
						  </tbody>
				   </table>
				   
				   <div id="escaper"></div>
            </div>
        </div>
    </div>
</div>


<!-- FOOTER -->
<?php include 'common/footer.php' ?>
<!-- /FOOTER -->

<!-- FOOTER -->
<?php include 'common/common_scripts.php' ?>
<!-- /FOOTER -->

<script type="text/javascript">
    $(document).ready(function() {
        $("#menu li:eq(1)").attr("id", "active");
    });

    $(function() {
        $("#searcher").click(function() {
            $("#searcherContent").slideToggle();
        });
    });

    $(function() {
        $("#dateFrom").datepicker();
        $("#dateTo").datepicker();
        
        //slider
        $( "#rateSlider" ).slider({
            value:0,
            min: 0,
            max: 5,
            step: 1,
            
            slide: function( event, ui ) {
                var str = "";
                for (var i = 0; i < ui.value; i++) {
                    str += "<span style=\"display: inline-block;color: #13c5ff;\">☆&nbsp;&nbsp;</span>";
                }
                for (var i = ui.value; i < 5; i++) {
                    str += "<span style=\"display: inline-block;\">☆&nbsp;&nbsp;</span>";
                }
                $("#rates").html(str);
            }
        });
        
        //rates star initialization in offerts search section
        var str = "";
        for (var i = 0; i < 5; i++) {
            str += "<span style=\"display: inline-block;\">☆&nbsp;&nbsp;</span>";
        }
        $("#rates").html(str);
    });
    
    var searcherBoxPosZero = $("#searcherBox").position();
    $(window).scroll(function() {
        var searcherBox = $("#searcherBox");
        var resultsDisplay = $("#offertSearchResults").css("display");
        
        if ($(this).scrollTop() > searcherBox.position().top 
                && !searcherBox.hasClass("top") && resultsDisplay != "none") {
            searcherBox.addClass("top");
            $("#searchResults").addClass("top");
            $("#searcherContent").fadeOut(300);
        } else if ($(this).scrollTop() <= searcherBoxPosZero.top && searcherBox.hasClass("top")) {
            searcherBox.removeClass("top");
            $("#searchResults").removeClass("top");
            $("#searcherContent").fadeIn(500);
        }
        
    });
    
    $(function() {
        $("#searchBtn").click(function() {
            $('html, body').animate({
                 scrollTop: ($("#offertSearchResults").offset().top - 50)
            }, 1);
            $("#offertSearchResults").fadeIn(900);
            $("#searcherContent").fadeOut(300);
        });
    });
    
    function showDetails(offertId) {
         document.location = 'ofertDetails.php';     
    }
</script>

</body>
</html>